<template>
  <div class="outer">
    <div class="login_form" :style="loginStyle" @click="tip=''">
      <h2>Welcome Home!</h2>
      <div class="form-item">
        <div class="ipt user">
          <input type="text" placeholder="Name" v-model="username">
          <img src="https://zgkheader.oss-cn-beijing.aliyuncs.com/2022-05-03/cd4acbe8-6283-4573-86fe-21c1ad514fb5a.jpg" alt="">
        </div>
        <div class="ipt pass">
          <input type="password" placeholder="Password" @keydown.enter="loginBtn" v-model="password">
          <img src="https://zgkheader.oss-cn-beijing.aliyuncs.com/2022-05-03/cd4acbe8-6283-4573-86fe-21c1ad514fb5a.jpg" alt="">
        </div>
        <img src="https://zgkheader.oss-cn-beijing.aliyuncs.com/2022-05-03/cd4acbe8-6283-4573-86fe-21c1ad514fb5a.jpg" alt="">
        <el-button :class="{'shake-horizontal':tip!==''}" type="primary" @click.stop="loginBtn">登陆</el-button>
        <el-button type="primary" @click.stop="goRegister">注册</el-button>
        <div class="forget" @click="goForget">忘记密码？</div>
        <p class="options">
          <span>{{ tip }}</span>
        </p>
      </div>
      <div class="social_login">
        <div class="line"></div>
        <div class="login">社交登陆</div>
        <div class="line"></div>
      </div>
      <div class="gitee">
        <a
          href="https://gitee.com/oauth/authorize?client_id=6ce0acfabdae640073bfd5da94be38ccc283218b0fc862f5538e6e3367c47195&redirect_uri=http://helmet.com/auth/oauth2.0/code&response_type=code"><img
          src="../assets/gitee.svg" alt=""></a>
      </div>
    </div>
    <div class="login_form" :style="registerStyle" @click="tip=''">
      <h2 style="margin-bottom: 10px">Welcome Home!</h2>
      <div class="form-item">
        <div class="ipt">
          <input type="text" placeholder="用户名" v-model="registerForm.username"/>
        </div>
        <div class="ipt">
          <input type="password" placeholder="密码" v-model="registerForm.password"/>
        </div>
        <div class="ipt">
          <input type="text" placeholder="手机号" v-model="registerForm.phone"/>
        </div>
        <div class="ipt email">
          <input type="text" class="email_input" placeholder="邮箱" v-model="registerForm.email"/>
          <el-button type="primary" :style="validBtnStyle" @click.stop="validBtn">验证</el-button>
          <div :style="validStyle" style="width: 68px; font-size: 20px;color: #23a1ff">{{timer}}</div>
        </div>
        <div class="ipt">
          <input type="text" placeholder="验证码" v-model="registerForm.code"/>
        </div>
        <img src="https:/zgkheader.oss-cn-beijing.aliyuncs.com/2022-05-03/cd4acbe8-6283-4573-86fe-21c1ad514fb5a.jpg" alt="">
        <el-button type="primary" @click.stop="doRegister">注册</el-button>
        <el-button type="primary" @click.stop="returnLogin">返回</el-button>
      </div>
    </div>
    <div class="login_form" :style="forgetStyle" @click="tip=''">
      <h2 style="margin-bottom: 10px">Welcome Home!</h2>
      <div class="form-item">
        <div class="ipt">
          <input type="text" placeholder="用户名" v-model="forgetForm.username"/>
        </div>
        <div class="ipt email">
          <input type="text" class="email_input" placeholder="邮箱" v-model="forgetForm.email"/>
          <el-button type="primary" :style="validBtnStyle" @click.stop="forgetValidBtn">验证</el-button>
          <div :style="validStyle" style="width: 68px; font-size: 20px;color: #23a1ff">{{timer}}</div>
        </div>
        <div class="ipt">
          <input type="text" placeholder="验证码" v-model="forgetForm.code"/>
        </div>
        <div class="ipt">
          <input type="password" placeholder="新密码" v-model="forgetForm.nowPassword"/>
        </div>
        <img src="https:/zgkheader.oss-cn-beijing.aliyuncs.com/2022-05-03/cd4acbe8-6283-4573-86fe-21c1ad514fb5a.jpg" alt="">
        <el-button type="primary" @click.stop="doValidate">修改</el-button>
        <el-button type="primary" @click.stop="returnLogin">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
   import {defineComponent, getCurrentInstance, onMounted, ref, reactive} from 'vue'
   import {get, login, post} from "../http"
   import {useRoute, useRouter} from "vue-router";
   import {ElMessage} from "element-plus";

   export default defineComponent({
      name: "Login.vue",
      setup() {
         const {proxy}: any = getCurrentInstance()
         const username = ref<string>("")
         const password = ref<string>("")
         const router = useRouter()
         const route = useRoute();
         onMounted(() => {
            if (route.query.reLogin) {
               proxy.$notify({
                  title: '提示',
                  message: "账号过期,请重新登录"
               })
            }
            if (route.query.token) {
               localStorage.setItem("Authorization", route.query.token + "");
               router.push("/index")
            }
         })

         let tip = ref('')
         const loginBtn = async () => {
            if (username.value == '' || password.value == '') {
               tip.value = '用户名密码不能为空!'
               return;
            }
            const boolean = await login({
               "username": username.value,
               "password": password.value
            });
            if (boolean) {
               proxy.$notify({
                  title: 'success',
                  message: '登陆成功'
               });
               await router.push("/index")
            } else {
               proxy.$notify.error({
                  title: '出差啦😢！',
                  message: '用户名或者密码出错'
               });
            }
         }

         let loginStyle = reactive<any>({display: 'block'});
         let registerStyle = reactive<any>({display: 'none'});
         let forgetStyle = reactive<any>({display: 'none'});
         let goRegister = () => {
            loginStyle.display = 'none';
            registerStyle.display = 'block';
         }
         let returnLogin = () => {
            loginStyle.display = 'block';
            registerStyle.display = 'none';
            forgetStyle.display = 'none';
         }
         let goForget = () => {
            loginStyle.display = 'none';
            forgetStyle.display = 'block';
         }
         let validStyle = reactive<any>({display: 'none'})
         let validBtnStyle = reactive<any>({display: 'block'})
         let timer = ref<number>(5);
         let validBtn = () => {
            get(`/auth/email/sendCode?email=${registerForm.email}`);
            validBtnStyle.display = 'none';
            let i = setInterval(() => {
               timer.value--;
               if (timer.value == 0) {
                  clearInterval(i);
                  timer.value = 60;
                  validBtnStyle.display = 'block';
                  validStyle.display = 'none';
               }
            }, 1000);
            validStyle.display = 'block';
         }

         let registerForm = reactive<any>({
            username: '',
            password: '',
            phone: '',
            email: '',
            code: '',
         });

         let doRegister = () => {
            if (registerForm.code == null || registerForm.code == '') {
               proxy.$notify.error({
                  title: '验证码为空！',
                  message: '亲，请输入验证码哦！'
               });
               return;
            }
            post('/auth/register', registerForm).then(data => {
               if (data.code == 200) {
                  proxy.$notify({
                     title: 'ok！',
                     message: '注册成功！'
                  });
                  returnLogin();
                  return;
               } else {
                  proxy.$notify.error({
                     title: 'error！',
                     message: data.msg
                  });
               }
            })
         };
         let forgetForm=reactive({
            username:'',
            email:'',
            code:'',
            nowPassword:'',
         });
         let doValidate = () => {
            if ((forgetForm.email == null || forgetForm.email == '')||(forgetForm.username == null || forgetForm.username == '')||(forgetForm.code == null || forgetForm.code == '')||(forgetForm.nowPassword == null || forgetForm.nowPassword == '')) {
               proxy.$notify.error({
                  title: 'error！',
                  message: '请将数据填写完整！'
               });
               return;
            }
            post('/auth/update', forgetForm).then(data => {
               if (data.code == 200) {
                  proxy.$notify({
                     title: 'ok！',
                     message: '修改成功！'
                  });
                  returnLogin();
                  return;
               } else {
                  proxy.$notify.error({
                     title: 'error！',
                     message: data.msg
                  });
               }
            })
         }

         let forgetValidBtn = async () => {
            if ((forgetForm.email == null || forgetForm.email == '')||(forgetForm.username == null || forgetForm.username == '')) {
               proxy.$notify.error({
                  title: 'error！',
                  message: '请输入用户名或邮箱！'
               });
               return;
            }
            let data=await get(`/auth/email/sendCode?email=${forgetForm.email}&username=${forgetForm.username}`);
            if (data.code!=200){
               proxy.$notify.error({
                  title: 'error！',
                  message: data.msg
               });
            }
            validBtnStyle.display = 'none';
            let i = setInterval(() => {
               timer.value--;
               if (timer.value == 0) {
                  clearInterval(i);
                  timer.value = 60;
                  validBtnStyle.display = 'block';
                  validStyle.display = 'none';
               }
            }, 1000);
            validStyle.display = 'block';
         }


         return {
            username,
            password,
            tip,
            loginBtn,
            loginStyle,
            registerStyle,
            goRegister,
            returnLogin,
            validStyle,
            validBtn,
            timer,
            validBtnStyle,
            registerForm,
            doRegister,
            forgetStyle,
            goForget,
            doValidate,
            forgetForm,
            forgetValidBtn
         }
      }
   })
</script>

<style scoped lang="scss">
  .outer {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .login_form {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 380px;
    padding: 40px 0 24px;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 10px #e6e6e6;
    z-index: 9;

    .form-item {
      padding: 0 50px;

      div img {
        display: none;
      }

      .email {
        display: flex;
        align-items: center;
        justify-content: center;

        .email_input {
          margin-bottom: 0;
        }

        .el-button {
          height: 30px;
        }

        margin-bottom: 12px;
      }

      img {
        position: absolute;
        top: -80px;
        left: 50%;
        width: 120px;
        height: 120px;
        border-radius: 100%;
        transform: translate(-50%, 0);
        box-shadow: 0 0 20px #000;
      }

      .options {
        text-align: center;
        color: #ff268b;

        span {
          font-size: 12px;
          display: inline-block;
          margin-top: 6px;
          cursor: pointer;
        }
      }

      .forget {
        font-size: 12px;
        color: red;
        margin-left: 260px;
        position: absolute;
        user-select: none;

        &:hover {
          cursor: pointer;
          text-decoration: underline;
        }
      }

    }

    .social_login {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 20px;

      .line {
        flex: 4;
        width: 100%;
        height: 1px;
        background-color: #0c0e10;
      }

      .login {
        flex: 3;
      }

    }

    .gitee {
      img {
        width: 40px;
        height: 40px;
        -webkit-user-drag: none;
      }
    }
  }

  .register_form {
    background-color: white;
    width: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2%;
    padding: 20px;
  }

  input {
    width: 100%;
    height: 44px;
    border-radius: 4px;
    border: 1px solid #eee;
    margin-bottom: 12px;
    font-size: 14px;
    padding: 0 12px;
    color: #606060;
    transition: all .3s;
    outline: none;

    &:hover {
      border-color: #0b9aff;
    }

    &:focus-within + img {
      display: block;
    }
  }

  button {
    border: none;
    background: #0b9aff;
  }

  .shake-horizontal {
    color: #ea0707;
    animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
  }

  @keyframes shake-horizontal {
    0%,
    100% {
      transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
      transform: translateX(-10px);
    }
    20%,
    40%,
    60% {
      transform: translateX(10px);
    }
    80% {
      transform: translateX(8px);
    }
    90% {
      transform: translateX(-8px);
    }
  }
</style>